<template>
  <div class="about">
    <h1>{{ $store.state.user.username }}</h1>
    <h1>{{ $store.state.user.username }}</h1>
    <h1>{{ $store.state.user.username }}</h1>
    <h1>{{ $store.state.user.username }}</h1>
    <h1>{{ $store.state.user.username }}</h1>
    <hr />
    <h1>{{ username }}</h1>
    <h1>{{ age }}</h1>
    <hr />
    <h1>{{ getUsername }}</h1>
    <hr />
    <button @click="btnClick">调用mutations</button>
    <hr />
    <button @click="refreshUsername('王五')">调用actions</button>
    <hr />
    <h1>{{ homeName }}</h1>
  </div>
</template>
<script>
/*
mapState使用
  作用：能简化我们state数据的使用
  使用步骤：
     导入  import {mapState} from 'vuex'
     定义  computed:{  ...mapState('模块名',['state属性名']) }
  调用
     html:  {{state属性名}}
     js:  this.state属性名

mapGetters使用
  作用：简化getters使用
  使用步骤：
     导入  import {mapGetters} from 'vuex'
     定义  computed:{  ...mapGetters('模块名',['getters方法名']) }
     调用  html {{getters方法名}}
           js    this.getters方法名

mapMutations使用
  作用：简化mutations使用
  原使用：this.$store.commit('模块名/方法名',实参)
  使用步骤：
     导入  import {mapMutations} from 'vuex'
     定义  methods:{  ...mapMutations('模块名',['方法名']) }
     调用  html  <button @click="方法名(实参值)"></button>
           js    this.方法名(实参值)

mapActions使用
   作用：简化actions使用
   原使用：this.$store.dispatch('模块名/方法名',实参)
   使用步骤：
     导入  import {mapActions} from 'vuex'
     定义  methods:{  ...mapActions('模块名',['方法名']) }
     调用  html  <button @click="方法名(实参值)"></button>
           js    this.方法名(实参值)
*/

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('user', ['username', 'age']),
    ...mapState('home', ['homeName']),
    ...mapGetters('user', ['getUsername'])
  },
  mounted () {
    console.log('age', this.age)
    console.log('mapState', mapState('user', ['username', 'age']))
  },
  methods: {
    ...mapMutations('user', ['SETUSERNAME']),
    ...mapActions('user', ['refreshUsername']),
    btnClick () {
      this.SETUSERNAME('赵六')
    }
  }
}
</script>
